<template>
  <div style="padding: 20px;" class="overflowY">
    <!--
      咱们用的栅格 按照24格算
      vue + element-ui
    -->
    <!--头部 begin-->
    <div style="margin: 0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="searchTimeDiv">
            <el-date-picker
              v-model="searchTime"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="4">
          <el-select v-model="searchSelect" placeholder="请选择" size="small">
            <el-option
              v-for="item in optionsSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input
            size="small"
            placeholder="请输入标题"
            prefix-icon="el-icon-search"
            v-model="searchInputTitle">
          </el-input>
        </el-col>
        <el-col :span="4" :offset="6">
          <div class="btnFloatRight">
            <el-button type="primary" size="small">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--头部 end-->
    <!--table begin-->
    <div style="border: 1px solid #cccccc;margin: 30px 0px 0px 0px;padding: 10px;">
      <!--table header-->
      <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;border-bottom:2px solid #cccccc;">
        <base-card title="直播活动" >
          <el-row :gutter="20" slot="header-right">
            <el-col :span="4" :offset="20">
              <div class="btnFloatCenter">
                <el-button type="primary" size="small">创建活动</el-button>
              </div>
            </el-col>
          </el-row>
        </base-card>
      </div>
      <!--table content-->
      <div style="position: relative;padding:20px 0px 54px 0px;margin:0px 0px 0px 0px;">
        <!--el-table --
          html table
          thead  tbody  tr td
        -->
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          height="400"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
          <el-table-column
            width="50"
            align="center"
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            align="center"
            prop="number"
            label="项目编号1"
            show-overflow-tooltip
            width="120">
          </el-table-column>
          <el-table-column
            align="center"
            label="项目名称"
            show-overflow-tooltip
            width="200">
            <template slot-scope="scope">
              <div style="width: 100%;text-align: center;" v-if="scope.row.edit">
                <el-input v-model="scope.row.name" placeholder="请输入内容" size="mini"></el-input>
              </div>
              <div style="width: 100%;text-align: center;" v-else>
                <span>{{scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="object"
            label="项目类型"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            prop="state"
            label="项目状态"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            prop="initiator"
            label="立项人"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            width="100"
            prop="trackingPeople"
            label="项目跟踪人"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            prop="company"
            label="建设单位"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            prop="beginTime"
            label="开始时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="endTime"
            align="center"
            label="结束时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            prop="engineerinCost"
            label="工程造价"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            width="300"
            label="操作">
            <template slot-scope="scope">
              <div style="text-align: center;">
                <el-row>
                  <el-col :span="8">
                    <el-button v-if="scope.row.edit" type="primary" size="mini" @click="keepTable(scope.row)">保存修改</el-button>
                    <el-button v-else type="primary" size="mini" @click="scope.row.edit=!scope.row.edit">自身编辑</el-button>
                  </el-col>
                  <el-col :span="8"><el-button type="primary" size="mini" @click="popUpEdit(scope.row)">弹框编辑</el-button></el-col>
                  <el-col :span="8"><el-button type="danger" size="mini">删除</el-button></el-col>
                </el-row>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="position: absolute;bottom:0;left: 10px;">
          <paging :size-change="handleSizeChange"
                  :current-change="handleCurrentChange"
                  :page-sizes="pageSizes"
                  :page-num="pageNum"
                  :total-num="totalNum">
          </paging>
        </div>
        <!--编辑弹出层 begin-->
        <el-dialog title="表格编辑" :visible.sync="dialogTableEdit" top="60px">
          <div class="overflowY" style="height: 330px;padding-right: 15px;">
            <el-form :inline="true" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="项目名称 : " prop="itmeName">
                    <el-input size="small" v-model="ruleForm.name" placeholder="请输入项目名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="开始时间 : " prop="itmeName">
                    <el-date-picker
                      v-model="ruleForm.beginTime"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="结束时间 : " prop="itmeName">
                    <el-date-picker
                      v-model="ruleForm.endTime"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="dialogTableEdit = false">取 消</el-button>
            <el-button type="primary" @click="btnClickFun">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!--table end-->
  </div>
</template>

<script>
  import BaseCard from '@/components/BaseCard/BaseCard'
  import paging from '@/components/demoAssembly/paging'
  export default {
    components: { // componets 底下包含的是页面中使用到的组件
      BaseCard,
      paging
    },
    data() {
      return {
        postList: {
          id: 123
        },
        searchTime: '', // 时间选择
        searchSelect: '', // 下拉框
        optionsSelect: [ // 下拉框选项
          {
            value: '0',
            label: '下拉选项1'
          },
          {
            value: '1',
            label: '下拉选项2'
          },
          {
            value: '2',
            label: '下拉选项3'
          }
        ],
        searchInputTitle: '', // 带icon的搜索框
        ruleForm: {},
        rowIndex: 0,
        dialogTableEdit: false,
        pageSizes: [10, 20, 30, 40],
        pageNum: 10,
        totalNum: 50,
        handleSizeChange() {
          alert('pageSize 改变时触发')
        },
        handleCurrentChange() {
          alert('currentPage 改变时会触发')
        },
        tableData: [
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          },
          {
            number: '12345678',
            date: '2016-05-03',
            name: '项目名称1',
            object: '项目类型1',
            state: '开始',
            initiator: '张三',
            trackingPeople: '李四',
            company: 'xxx单位',
            beginTime: '2016/01/02',
            endTime: '2016/02/03',
            engineerinCost: '250000'
          }
        ]
      }
    },
    mounted() {
      // this.tableData.map(v => {
      //   this.$set(v, 'edit', false)
      // })
      this.fetchData()
    },
    methods: { // methods 所有的js方法都放在这个里面
      handleSelectionChange(val) { // 当选择项发生变化时会触发该事件,val返回选中行

      },
      fetchData() {
        this.$store
          .dispatch('AddLive', this.postList) // 往后台传的参数
          .then(res => {
            this.data = res
          }).catch((err) => { console.log(err) })
      },
      keepTable(row) { // 点击编辑保存按钮执行的function
        row.edit = false
      },
      popUpEdit(row) { // 点击弹框编辑按钮执行的function
        this.dialogTableEdit = true
        this.ruleForm = row
      },
      btnClickFun() { // 点击弹出层修改确认按钮执行的function
        // 在此方法里面执行调用保存接口完成修改数据保存 然后刷新数据
        this.dialogTableEdit = false
      }
    }
  }
</script>

<style scoped>
  .searchTimeDiv >>> div{
    width: 100%;
  }
  .btnFloatCenter{
    width: 100%;
    text-align: center;
  }
  .btnFloatLeft{
    width: 100%;
    text-align: left;
  }
  .btnFloatRight{
    width: 100%;
    text-align: right;
  }
</style>
